<template>
  <div>
    <el-form label-width="80px" :model="form" :rules="rules" ref="changeForm">
      <el-form-item label="头像">
        <div class="avater-box">
          <img v-show="form.avater" class="suolueImg" :src="form.avater" />
          <el-upload
            class="avaterLoad"
            action="http://localhost:3000/upload/img"
            :headers="setHearder"
            name="myfile"
            :show-file-list="false"
            :on-success="onsuccess"
          >
            <el-button type="info" round size="mini">上传</el-button>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item label="用户名" prop="username">
        <el-col :span="6">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-col :span="6">
          <el-radio v-model="form.sex" label="男"></el-radio>
          <el-radio v-model="form.sex" label="女"></el-radio>
          <el-radio v-model="form.sex" label="保密"></el-radio>
        </el-col>
      </el-form-item>

      <el-form-item label="个人简介">
        <el-col :span="6">
          <el-input
            type="textarea"
            rows="2"
            maxlength="50"
            placeholder="请输入用户详情"
            v-model="form.desc"
          >
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-col :span="6">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="电子邮箱" prop="email">
        <el-col :span="6">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-col :span="6" class="buttonBox">
          <el-button 
            type="success"
            size="medium"
            @click="changeUserInfo"
            round
          >
            更新
          </el-button>
          <el-button
            size="medium"
            @click="$router.push('/admin/users/personal')"
            round
          >
            返回
          </el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { changeUserInfo, findUserInfo } from "@/api/user";
export default {
  data() {
    return {
      setHearder: {
        authorization: "Bearer " + this.$store.state.token,
      }, //上传头像的头信息
      form: {
        // 图片缩略图地址
        _id: "",
        avater: "",
        username: "", //用户名
        desc: "", //用户简介
        email: "", //电子邮箱
        phone: "", //手机号
        sex: "", //选择按钮
      },
     
        // 验证规则
        rules: {
           username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
        ],
         phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { len: 11, message: "手机号必须为11位", trigger: "blur" },
          { pattern: /^1\d{10}$/, message: "手机号格式错误", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"],
          },
        ],
        }
    };

 
  },
created() {
   this.form = this.$store.state.user
  },


  methods: {
    // 上传头像
    onsuccess(file) {
      this.form.avater = file.data;
    },  

    //修改信息
    async changeUserInfo() {
      const { data } = await changeUserInfo(this.form);
      if (data.code == 200) {
        this.$message({
          message: data.msg,
          type: "success",
        });
        //重新请求数据
    const res = await findUserInfo(this.$store.state.user._id);
    const { user } = res.data;
    this.$store.commit('setUserInfo',user)  
       setTimeout(() => {
          this.$router.push('/admin/users/personal')
       }, 500);
      } else {
        this.$message({
          message: data.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.avater-box {
  display: flex;
  align-items: center;
  .suolueImg {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
.buttonBox{
    display: flex;
    justify-content: space-between;  
}
</style>